<template>
	<view class="content">
		<u-navbar title="管理常用语"></u-navbar>

		<view class="content_main">
			<view class="content_main_item" v-for="item in data.list" :key="item.id">
				<!-- <view class="u-white-80 u-flex u-flex-wrap">
					{{item.content}}
				</view> -->
				<u-input type="textarea" v-model="item.content" disabled></u-input>
				<view class="u-m-t-30 u-flex u-row-right">
					<view class="u-flex" @click="handDel(item.id)">
						<u-image src="/pages/pagesMessage/static/trash.png" width="32" height="32" mode="widthFix"></u-image>
						<text class="u-m-l-10">删除</text>
					</view>
					<view class="u-flex u-m-l-30" @click="toDetail(item)">
						<u-image src="/pages/pagesMessage/static/phrasesEdit.png" width="32" height="32" mode="widthFix"></u-image>
						<text class="u-m-l-10">编辑</text>
					</view>
				</view>
			</view>
		</view>


		<u-bottom-button confirmText="添加常用语" @confirm="toDetail"></u-bottom-button>

		<u-modal v-model="data.isDel" title="系统提示" content="是否要删除该常用语" show-cancel-button @confirm="$u.throttle(confirm, 1000)"></u-modal>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive
	} from "vue";
	import {
		useUserIm
	} from '/stores/userIm.js'
	const IM = useUserIm()
	const data = reactive({
		list: [],
		isDel: false,
		id: ''
	})
	onShow(() => {
		getPhraseList()
	})
	// 删除常用语
	const confirm = async () => {
		let params = {
			token: IM.imToken,
			id: data.id
		}
		let res = await uni.$u.api.getPhraseDel(params)
		uni.$u.toast('删除成功')
		getPhraseList()
	}
	// 打开删除弹框
	const handDel = (id) => {
		data.id = id
		data.isDel = true
	}
	// 去添加/修改常用语页面
	const toDetail = (item = null) => {
		uni.$u.route('pages/pagesMessage/commonPhrases/detail', {
			item:JSON.stringify(item)
		})
	}
	// 获取常用语列表
	const getPhraseList = async () => {
		let params = {
			token: IM.imToken
		}
		let res = await uni.$u.api.getPhraseList(params)
		data.list = res.items
	}
</script>

<style scoped lang="scss">
	.content {
		&_main {
			padding: 0 30rpx;
			padding-bottom: 150rpx;
			color: #101010;
			font-size: 26rpx;

			&_item {
				padding: 40rpx 0 20rpx 0;
				border-bottom: 2rpx solid #eeeeee;
			}
		}
	}
</style>